<template>
  <div class="appointment-query-page">
    <el-card class="main-card">
      <div class="query-bar">
        <el-input v-model="cardId" placeholder="请输入患者就诊卡ID" class="card-input" clearable @keyup.enter="handleQuery" />
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="success" @click="openApplyModal" style="margin-left:auto">预约申请</el-button>
      </div>
      <div v-if="patient" class="patient-info">
        <div><b>姓名：</b>{{ patient.name }}</div>
        <div><b>性别：</b>{{ patient.gender }}</div>
        <div><b>年龄：</b>{{ patient.age }}</div>
        <div><b>就诊卡ID：</b>{{ patient.cardId }}</div>
      </div>
      <div v-if="appointments.length > 0" class="result-area">
        <el-table :data="appointments" border style="margin-top:18px;">
          <el-table-column prop="date" label="预约日期" width="120" />
          <el-table-column prop="department" label="科室" width="120" />
          <el-table-column prop="doctor" label="医生" width="120" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === '已完成' ? 'success' : scope.row.status === '已取消' ? 'info' : 'warning'">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="desc" label="备注" />
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button size="small" @click="openEditModal(scope.row)">调整</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else-if="queried" class="no-result">暂无预约记录</div>
    </el-card>
    <!-- 预约申请/调整弹窗 -->
    <el-dialog :title="modalTitle" v-model="modalVisible" width="420px" @close="resetModal">
      <el-form :model="modalForm" label-width="80px">
        <el-form-item label="患者">
          <el-select v-model="modalForm.cardId" filterable placeholder="选择患者" style="width:100%" :disabled="!!editRow">
            <el-option v-for="p in allPatients" :key="p.cardId" :label="p.name + '（' + p.cardId + '）'" :value="p.cardId" />
          </el-select>
        </el-form-item>
        <el-form-item label="科室">
          <el-select v-model="modalForm.department" placeholder="选择科室" style="width:100%" @change="onDeptChange">
            <el-option v-for="d in departments" :key="d.name" :label="d.name" :value="d.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="医生">
          <el-select v-model="modalForm.doctor" placeholder="选择医生" style="width:100%">
            <el-option v-for="doc in filteredDoctors" :key="doc.name" :label="doc.name" :value="doc.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="modalForm.date" type="date" placeholder="选择日期" style="width:100%" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="modalForm.desc" placeholder="备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="modalVisible = false">取消</el-button>
        <el-button type="primary" @click="handleModalOk">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const cardId = ref('')
const queried = ref(false)
const patient = ref<any>(null)
const appointments = ref<any[]>([])

// 假数据
const allPatients = [
  { cardId: '10001', name: '张三', gender: '男', age: 32 },
  { cardId: '10002', name: '李四', gender: '女', age: 28 },
  { cardId: '10003', name: '王五', gender: '男', age: 45 }
]
const departments = [
  { name: '内科系统', doctors: ['李明', '周强'] },
  { name: '外科系统', doctors: ['王芳', '赵强'] },
  { name: '妇产科', doctors: ['孙芸'] }
]
const allAppointments = ref<any[]>([
  { cardId: '10001', date: '2024-06-01', department: '内科系统', doctor: '李明', status: '已完成', desc: '普通门诊' },
  { cardId: '10001', date: '2024-06-10', department: '外科系统', doctor: '王芳', status: '待就诊', desc: '手术预约' },
  { cardId: '10002', date: '2024-06-02', department: '妇产科', doctor: '孙芸', status: '已取消', desc: '患者原因' }
])

const filteredDoctors = computed(() => {
  const dept = departments.find(d => d.name === modalForm.value.department)
  return dept ? dept.doctors.map(name => ({ name })) : []
})

const modalVisible = ref(false)
const modalForm = ref<any>({ cardId: '', department: '', doctor: '', date: '', desc: '' })
const modalTitle = ref('')
const editRow = ref<any>(null)

function handleQuery() {
  if (!cardId.value) {
    ElMessage.warning('请输入就诊卡ID')
    return
  }
  patient.value = allPatients.find(p => p.cardId === cardId.value)
  appointments.value = allAppointments.value.filter(a => a.cardId === cardId.value)
  queried.value = true
  if (!patient.value) {
    ElMessage.error('未找到该患者信息')
  }
}
function resetQuery() {
  cardId.value = ''
  patient.value = null
  appointments.value = []
  queried.value = false
}
function openApplyModal() {
  modalTitle.value = '预约申请'
  modalForm.value = { cardId: '', department: '', doctor: '', date: '', desc: '' }
  editRow.value = null
  modalVisible.value = true
}
function openEditModal(row: any) {
  modalTitle.value = '预约调整'
  modalForm.value = { ...row }
  editRow.value = row
  modalVisible.value = true
}
function onDeptChange() {
  modalForm.value.doctor = ''
}
function handleModalOk() {
  // 校验
  if (!modalForm.value.cardId || !modalForm.value.department || !modalForm.value.doctor || !modalForm.value.date) {
    ElMessage.warning('请填写完整信息')
    return
  }
  if (editRow.value) {
    // 调整预约
    Object.assign(editRow.value, { ...modalForm.value })
    ElMessage.success('预约已调整')
  } else {
    // 新增预约
    allAppointments.value.push({
      ...modalForm.value,
      status: '待就诊'
    })
    ElMessage.success('预约已申请')
    // 若当前查询患者与申请患者一致，刷新表格
    if (patient.value && patient.value.cardId === modalForm.value.cardId) {
      appointments.value = allAppointments.value.filter(a => a.cardId === patient.value.cardId)
    }
  }
  modalVisible.value = false
}
function resetModal() {
  modalForm.value = { cardId: '', department: '', doctor: '', date: '', desc: '' }
  editRow.value = null
}
</script>
<style scoped>
.appointment-query-page {
  background: #f6fafd;
  min-height: 100vh;
  padding: 32px 0;
}
.main-card {
  max-width: 700px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 32px 28px 28px 28px;
}
.query-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.card-input {
  width: 240px;
}
.patient-info {
  margin-bottom: 18px;
  font-size: 1.08em;
  color: #333;
  display: flex;
  gap: 32px;
}
.result-area {
  margin-top: 12px;
}
.no-result {
  color: #888;
  font-size: 1.1em;
  text-align: center;
  margin-top: 32px;
}
</style> 